<template>
  <div>
    <ul>
      <li v-for="item in menus" :key="item.name">
        <div>{{ item.name }}</div>
        <ul>
          <li
            class="item"
            :class="hover == i ? 'hover-item' : ''"
            v-for="(item2, i) in item.children"
            :key="item2.name"
            @click="handleClickMenu(item2, i)"
          >
            {{ item2.name }}-{{ item2.title }}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>
<script lang="ts">
import { reactive, toRefs } from "vue";
import { injectAppNavigator } from "../navigator/app-navigator";
import { AppMenu, MENUS } from "./menus";

export default {
  name: "app-menu",
  props: {
    currentPath: { type: String },
  },
  setup() {
    const navigator = injectAppNavigator();
    let state = reactive({
      hover: 0,
    });
    const handleClickMenu = function (menu: AppMenu, i: number) {
      state.hover = i;
      navigator.methods.go(menu.page);
    };
    return {
      ...toRefs(state),
      menus: MENUS,
      handleClickMenu,
    };
  },
};
</script>
<style lang="scss" scoped>
.item {
  height: 40px;
  line-height: 40px;
  text-align: left;
  cursor: pointer;
}
.hover-item {
  color: pink;
}
</style>